<?php  echo $html->script(array("jquery.min.js","jquery.pagination.js","jquery-ui.js"));?>
<script type="text/javascript">
	function pageselectCallback(page_index, jq, items_per_page){
		page_index = page_index ==0 ? 1 : (page_index+1);
		var startIndex = parseInt(((page_index - 1) * items_per_page));
		var endIndex = parseInt(((page_index) * items_per_page));
		jQuery('#Searchresult ul').empty();
		jQuery('#hiddenresult ul li').each(function(i,obj){
			if(startIndex <= i && i < endIndex ){
				var new_content = jQuery(obj).clone();
				jQuery('#Searchresult ul').append(new_content);
			}
		});
		var totalPage = 0;
		try{
			totalPage = Math.ceil(parseInt(jQuery('#hiddenresult ul li').size())/items_per_page);
		}catch(ex){

		}
		jQuery('#pagePositionNum').empty().html('Page '+page_index+' of '+totalPage);
		return false;
	}

            // When document is ready, initialize pagination
            jQuery(document).ready(function(){

                jQuery('#viewNumPageItem ul li a').live('click',function(){
                    var $href = jQuery(this).attr('href');
                    $href = parseInt($href.replace('#',''));
                    // count entries inside the hidden content
                    var num_entries = jQuery('#hiddenresult ul li').length;

                    // Create content inside pagination element
                    jQuery("#Pagination").empty().pagination(num_entries, {
                        callback: pageselectCallback,
                        items_per_page: $href // Show only one item per page
                    });
                    jQuery(this).closest('ul').find('li span').each(function(i,$this){
                        var pageNum = jQuery(this).html();
                        jQuery(this).closest('li').empty().html('<a href="#'+pageNum+'">'+pageNum+'</a>');
                    });
                    jQuery(this).closest('li').empty().html('<span>'+$href+'</span>');
                    return false;
                }).eq(0).trigger('click') ;

                jQuery('#gotoPage button').click(function(){
                    var $pageNum = parseInt(jQuery('#gotoPage input[type=text]').val());
                    $pageNum = $pageNum - 1;
                    jQuery("#Pagination").trigger('setPage', [$pageNum]);
                });
                //initPagination();

				jQuery("a.switch_thumb").toggle(function(){
                    jQuery(".days_left").hide();
                    jQuery(this).addClass("swap");
                    jQuery("ul.display").fadeOut("fast", function() {
                        jQuery(this).fadeIn("fast",function(){
                            jQuery(this).find('.content_block p').each(function(){
                                jQuery(this).find('span:eq(0)').appendTo(jQuery(this));
                            });
                        }).addClass("thumb_view");
                    });
                }, function () {
                    jQuery(".days_left").show();
					jQuery(this).removeClass("swap");
                    jQuery("ul.display").fadeOut("fast", function() {
                        jQuery(this).fadeIn("fast",function(){
                            jQuery(this).find('.content_block p').each(function(){
                                jQuery(this).find('span:last').prependTo(jQuery(this));
                            });
                        }).removeClass("thumb_view");


                    });
                });
				// bind change event to select
     /* jQuery('#dynamic_select').bind('change', function () {
          var url = jQuery(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });*/
    });
 </script>
<div class="image-content1" style="height:500px;text-align: center;width:548px;border:1px solid #EFEFEF">
<table width="100%" height="100%"><tr><td valign="middle" align="center">
<?php 
if(count($images)>1){
$j=0;
 foreach ($images as $image){?>
	<a <?php if ($j>0){?>style="display:none"<?php }?> href="<?php echo Configure::read('base_url');?>products/details/<?php echo $pid?>">
	<?php 
		echo $html->image('mediumimg/'.$thumbnail->render($image['ProductImage']['image'],
				array(
					'width'=>500,
					'height'=>500,
					'quality'=>80,
					'path'=>'mediumimg'
				)
			)
		);
	?>
	</a>
<?php	 $j++;
	}
  }else{ ?>
  <a href="<?php echo Configure::read('base_url');?>products/details/<?php echo $pid?>">
	<?php 
		echo $html->image('mediumimg/'.$thumbnail->render($thumb['Product']['products_thumbnailImage'],
				array(
					'width'=>500,
					'height'=>500,
					'quality'=>80,
					'path'=>'mediumimg'
				)
			)
		);
		
	?>
  </a>
  <?php }?>
  </td></tr></table>
</div>
<?php if(count($images)>1){?>
 <div class="image-thumb1">
		<?php foreach ($images as $image):?>
		<a href="javascript:void(0);">
		<?php 
		echo $html->image('popupthumbs/'.$thumbnail->render($image['ProductImage']['image'],
				array(
					'width'=>32,
					'height'=>32,
					'quality'=>80,
					'path'=>'popupthumbs'
				)
			)
		);
		?></a>
		<?php endforeach;?>
</div>
<?php } ?>

<style type="text/css">
.image-content1 img{cursor: pointer;}
.image-thumb1 a:link{text-decoration:none;}
.image-thumb1{float:left;}
.image-thumb1 a{float:left;margin:3px;padding:3px;border:1px solid #efefef}
</style>
<?php //echo $this->element('home/browse_search_js'); ?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.image-thumb1 a').click(function(){
		var track=jQuery('.image-thumb1 a').index(this);		
		jQuery('.image-content1 a').fadeOut("200").hide();
		jQuery(".image-content1 a:eq("+track+")").fadeIn("250").show();
		return false;
    });	
	jQuery("div.popupWrapper1").mouseenter(function(){}).mouseleave(function(){
		disablePopup1();
    });
	jQuery(".thumb_mouse_out").mouseenter(function(){}).mouseleave(function(){
		//console.log('mouse out');
		//var ajaxInstance = null;
    });
	
});	
</script>